/* book的所有内容都在这个大盒子里面 */
#book_content{
    width: 1200px;
    margin:0 auto;
}
/* 设置图书的logo */
#book_logo{
    width: 1200px;
    height: 40px;
    margin: 10px auto;
}
#book_logo > img{
    width: 100%;
    height: 100%;
    background-color: black;
}
/* 设置图书页的第一个模块：包括左侧分类栏和右侧轮播图 */
#book_content > div:first-child{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
/* 把第一个模块分出左 中 右三块 */
/* 左部分:二级分类 纵向布局排列所有的元素*/
#book_category{
    width: 200px;
    display: flex;
    flex-direction: column;
    border: 1px solid #414141;
    border-radius: 7px 7px 0 0;
}
#book_category > p{
	color: white;
	font-weight: 700;
	text-align: center;
	background: #414141;
	padding: 5px 0;
	border-bottom: 1px dotted yellow;
	border-radius: 5px 5px 0 0;
}
/* 需要设置里面每个元素 左右布局*/
#book_category > li{
    width: 90%;
    color: grey;
    margin: 0 auto;
}
#book_category > li > p{
	font-size: 15px;
	font-weight: 600;
	margin: 5px 0;
}
#book_category > li > div{
	display: flex;
	justify-content: flex-start;
	align-content: flex-start;
	flex-wrap: wrap;
	padding: 5px 0;
	border-bottom: 1px dotted black;
}
#book_category > li > div > a{
	font-size: 13px;
	color: black;
	margin-right: 30px;
}
#book_category > li > div > a:hover{
	color: rgb(236,120,20);
	text-decoration: underline;
}
/* 中部分：包括上面的轮播图和下面的推荐，先设置整体的大盒子布局 */
#book_slide{
    width: 600px;
    display: flex;
    flex-direction: column;
    border: 1px solid black;
}
/* 轮播图最外面的可视盒子 */
#book_slide_show{
    width: 100%;
    height: 300px;
    border: 1px solid black;
    position: relative;
    overflow: hidden;
}
/* 轮播图的ul */
#book_slide_show > ul{
    width: 500%;
    height: 100%;

    position: relative;
    top: 0;
    left: 0;
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
}
/* ul里面的li */
#book_slide_show > ul > li{
    width: 100%;
    height: 100%;
}
/* 设置li中的图片 */
#book_slide_show > ul > li > a > img{
    width: 100%;
    height: 100%;
    background-color: pink;
}
/* 设置焦点样式 */
#book_slide_show > ol{
    height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    position: absolute;
    right: 10px;
    bottom: 0;  
}
#book_slide_show > ol > li{
    width: 20px;
    height: 20px;
    color: white;
    border-radius: 20px;
    background-color: black;
    cursor: pointer;
    
    display: flex;
    justify-content: center;
    align-content: center;
}
#book_slide_show > ol > li.active{
    color: black;
    background-color: white;
}
/* 推荐部分上方的选项卡 */
#book_banner_top{
   width: 100%; 
   height: 60px;

   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin-top: 20px;
   border-bottom: 1px solid black;
}
/* 设置新书推荐 */
#book_banner_top > span{
    font-weight: 600;
    font-size: 20px;
    margin:0 0 5px 10px;
}
/* 设置主播推荐右边的选项卡 */
#book_banner_top > ul{
    display: flex;    
}
#book_banner_top > ul > li:first-child{
    color: white;
    background-color: black;
}
#book_banner_top > ul > li{
    height: 25px;
    padding: 5px 10px;
    border: 1px solid black;
}
/* 推荐部分下方的内容：图片，只允许八张图片 */
#book_banner_content{
    width: 100%;
    height: 300px;
}
#book_banner_content > a > img{
    width: 25%;
    height: 50%;
}
/* 右部分：上方的快讯和下方的专题 */
#book_extra{
	width: 240px;
    display: flex;
    flex-direction: column;
}
/* 设置快讯内容 */
#book_extra > ul:first-child{
    width: 96%;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #414141;
    padding: 5px 0 0 10px;
}
/* 设置内容 */
#book_extra > ul:first-child > li{
	width: 100%;
	height: 20px;
	font-size: 14px;
   	display: inline;
   	overflow: hidden;
   	margin: 5px 0;
}
#book_extra > ul:first-child > li > a{
    color: black;
}
#book_extra > ul:first-child > li > a:hover{
    text-decoration-line: underline;
}
/* 设置标题 */
#book_extra > ul:first-child > li:first-child{
   text-align: center;
   font-size: 16px;
   font-weight: 600;
   margin-left: 5px;
}
/* 设置下面的专题 */
#book_extra > ul:last-child{
	width: 100%;
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	border: 1px solid #414141;
}
	
/* 设置专题的标题 */
#book_extra > ul:last-child > li{
	width: 100%;
	display: flex;
}
#book_extra > ul:last-child > li:first-child{
   	text-align: center;
    font-weight: 600;
    border-bottom:1px solid black;
    padding: 5px 10px;
}
/* 设置专题的所有图片 */
#book_extra > ul:last-child > li > a{
	display: flex;
	width: 100%;
	justify-content: center;
}
#book_extra > ul:last-child > li > a > img{
   width: 160px;
   height: 160px;
}
/* 设置通用的div样式：偷懒了... */
#book_content > div:not(:first-child){
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 20px;
}
/* 左边部分 */
.books_content{
    width: 950px;
   
    border: 1px solid black;
}
/* 设置标题 */
.book_flag{
    font-size: 18px;
    font-weight: 600;
    height: 30px;
    padding: 15px 0 0 25px;
    border-bottom: 1px solid black;
}
/* 设置每本图书的样式 */
.book_contain{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.book_one{
	width: 25%;
	flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px 0 0 10px;
}
.book_one > a{
    display: flex;
    flex-direction: column;
}
/* 图书的图片 */
.book_pic{
    width: 150px;
    height: 180px;
}
/* 图书的名字 */
.book_title{
    width: 100%;
    height: 20px;
    font-size: 14px;
    overflow: hidden;
    color: black;
}
.book_one > a:hover > .book_title{  
    text-decoration-line: underline;
}
/* 图书的作者 */
.boot_author{
    width: 100%;
    height: 20px;
    font-size: 14px;
    overflow: hidden;
    color: gray;
}
/* 图书的价格 */
.boot_price{
    color: orangered;
    font-size: 15px;
}
.boot_price > span{
    color: black;
    margin-left: 10px;
    text-decoration-line: line-through;
}
/* 右边的排行榜 */
.book_rank{
    width: 230px;
    border: 1px solid black;
    display: flex;
    flex-wrap: wrap;
}
/* 排行的数字 */
.book_rank > p{
    width: 100%;
    height: 30px;
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid black;
    padding: 15px 0 0 15px;
}
/* 没有加active属性的 */
.book_rank > ul > li{
    display: flex;
    border-bottom: 1px solid black;
    padding: 5px 0;
    margin: 0 5px;
}
.book_rank > ul > li[flag='0'] > span:first-child{
    padding: 0 5px;  
}
.book_rank > ul > li[flag='0'] > div{
    font-size: 14px;
}
.book_rank > ul > li > div > p > a{
    width: 80px;
    height: 40px;
    color: black;
    overflow: hidden;
}
.book_rank > ul > li > div > p > a:hover{
    text-decoration-line: underline;
}
/* flag为1 */
.book_rank > ul > li[flag='1']> span:first-child{
    padding: 0 5px;  
}
.book_rank > ul > li[flag='1'] > a > img{
    width: 120px;
    height: 120px;
}
.book_rank > ul > li[flag='1'] > div{
    font-size: 14px;
    margin-left: 5px;
}
.book_rank > ul > li[flag='1'] > div > p:nth-child(2){
    margin: 5px 0 15px;
    color: red;
}
